<template>
	<view class="card" @click="emitClick">
		<view class="deleteIcon" @tap="delTap" v-if="showDelete">
			<text class="iconfont icon-shanchu" style="color:#FF0000;font-size:36rpx"></text>
			<!-- <van-icon name="close" size="26px"/> -->
		</view>
		<view class="cardTit">
			<view v-if="withPic!=false" style="display: flex;align-items: center;">
				<!-- <van-icon class="titleIcon" name="close" size="26px" color="blue" />
				 -->
				 <text class="iconfont titleIcon" :class="[iconClass?iconClass:'icon-zhongzhijihua1']" style="color:#3270EC;font-size:52rpx"></text>
			</view>
			<view class="titLabel"><slot name="tit" /></view>
		</view>
		<view class="mainInfo">
			
			<slot name="mainInfo" />
		</view>
		<view class="btnArea">
			<slot name="btn" />
		</view>
	</view>
</template>

<script>
	export default {
		name:"card",
		props:{
			data:{
				type:Object,
				default:[]
			},
			withPic:{
				type:Boolean,
				default:true
			},
			iconClass:{
				type:String,
				default:''
			},
			showDelete:{
				type:Boolean,
				default:true
			}
		},
		created:function(){
			console.log(this.withPic)
		},
		data() {
			return {
				
			};
		},
		methods:{
			emitClick(event){
				this.$emit('click',event)
			},
			delTap(event){
				this.$emit('delete',event)
			}
		}
	}
</script>

<style scoped>
	.card{
		padding:21px 12px 8px 10px;
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1);
		box-sizing: border-box;
		border-radius: 10px;
		position: relative;
		background: #fff;
		margin-bottom: 15rpx;
	}
	.card>.deleteIcon{
		position: absolute;
		right:0;
		top:0;
		border-radius: 0px 10px 0px 10px;
		background: #F2F2F2;
		width:52rpx;
		height:52rpx;
		text-align: center;
	}
	.cardTit{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.titLabel{
		font-size: 18px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 26px;
	}
	.titleIcon{
		margin-right:5px;
		margin-top: 10rpx;
	}
	/* .mainInfo{
		padding:0 32px;
		color: #666666;
	} */
	
	.btnArea{
		text-align: right ;
	}
	.detail{
		color:#06AE61
	}
	.btnArea{
		padding: 8px 2px 0 0;
		border-top:1px solid #F0F0F0;
		margin-top:8px;
		box-sizing: border-box;
	}
	
</style>